<template>
    <div class="orderContainer">
        <div class="header">
            <van-icon name="wap-home-o" size="30" @click="$router.push('/index')"/>
            <span class="headerText">网易严选</span>
            <van-icon class="search" name="search" size="30" @click="$router.push('/search')" />
            <van-icon name="shopping-cart-o" size="30" @click="$router.push('/shopcart')"/>
        </div>
        <van-cell is-link class="address">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <div>
                    <span>{{ addressList.name }}</span>
                    <span>{{ addressList.tel }}</span> 
                </div>
                
                <van-tag type="primary">默认</van-tag>
                <span class="custom-title">{{ addressList.province }}{{ addressList.city }}{{ addressList.county }}{{ addressList.addressDetail }}</span>
            </template>
        </van-cell>

        <van-cell is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">暂无可用优惠券</span>
            </template>
        </van-cell>
        <van-cell-group border class="main">
            <van-cell title="商品总计" :value="total*100" />
            <van-cell title="邮费" value="￥0.00" />
            <van-cell title="活动优惠" value="-￥0.00" />
            <van-cell title="优惠券" value="-￥0.00" />
        </van-cell-group>


        <van-card
            v-for="(shop,index) in shopList"
            :key="shop.skuId"
            :num="shop.skuNum"
            :price="shop.skuPrice"
            :title="shop.skuName"
            :thumb="shop.imgUrl"
            origin-price="10000.00"
        />
        <van-submit-bar text-align="left" :price="total*100" button-text="提交订单" @submit="onSubmit" />
    </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
  export default defineComponent({
    name:'order'
  })
</script>
<script lang="ts" setup>
import { showToast } from 'vant';
import { computed, nextTick, onMounted, ref } from 'vue';
import { shopDataStore } from '@/stores/shopcart';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()

const shopStore = shopDataStore()
const addressList=JSON.parse(route.params.id as string)
// console.log(route.params.id);
onMounted(async()=>{
    // 获取购物车列表
    shopStore.getShopList()
    // router.go(0)
    // 获取订单信息
    await shopStore.reqTradeInfo()
    shopStore.reqSubmitOrder()
})

const {shopList} = storeToRefs(shopStore)

shopList.value=shopList.value.filter(item=>item.isChecked)
console.log(shopList);

const onSubmit = () => {
    router.push('/pay')
};

// 计算总价
const total = computed(() => {
    let sum = 0
    let _list = shopList.value.filter(item => item.isChecked)
    _list.forEach(item => {
      sum += item.skuPrice * item.skuNum
    })
    return sum
})
</script>

<style lang="less" scoped>
.orderContainer{
    .header{
        display: flex;
        height: 44px;
        align-items: center;
        margin: 0 10px;

        .headerText{
            flex: 1;
            text-align: center;
        }
    }
    .address{
        height: 75px;
    }
    .main{
        margin-top: 20px;
    }
}
</style>
